<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        *{
            padding: 0;
            margin: 0;
        }

   .cssDiv{
       width: 100px;
       height: 100px;
       background-color: green;
       color:hotpink;
       font-size: 30px;
       position: absolute;
       top:100px;
       left:100px;
   }

    </style>

</head>
<body>
      <!-- <div id="div1">div1
        <p>div中的p</p>
    </div>
       </div>
       <div id="div2" class='div2'>div2
           <p>div中的p</p>
       </div>
       <p>pppp</p>
       <span>span</span>
       <h1>h1</h1>
       <h2>h2</h2>-->

      <!-- <ul>
          <li>内容1</li>
          <li>内容2</li>
          <li>内容3</li>
          <li>内容4</li>
          <li>内容5</li>
          <li>内容6</li>
      </ul> -->

      <!-- 操作属性 -->
      <div id="oneDiv" class="oneclass twoclass" name="one">
          <p>p的<span>内</span></p>
      </div>
     
      <input type="text">

     <div class="cssDiv">1111</div>

      <input type="checkbox" checked/>
      <button>点击</button>

    </body>
</html>
<!-- 安装jquery -->
 <script  src='./lib/jquery.min.js'></script> 
<script>
    //文档就绪函数
       $(()=>{
           //原生态js
          // let divObj = document.getElementById("div1");
           //console.log(divObj.innerHTML);
          //$(css的选择器) ==>获取操作的节点
          //得到的是一个jquery对象
          //let divObj = $("#div1");
          //console.log(divObj.html());
          //原生对象和jqury对象可以相互转换
          //1 原生 --->>jqury对象
          //let divObj = document.getElementById("div1");
          //console.log($(divObj).html());
        //2 jqury对象--->>原生 
          //let divObj = $("#div1").get(0);
          //console.log(divObj.innerHTML);
          //获得元素集合的个数
         // console.log($("div").length);
         //console.log($(".div2").html())
         //$(".div2").html("div22222222222");
         //$("p,h1,h2").css({"color":"red","font-size":"30px"});
        
        //$("div p").css({'color':'green'})

        //$("li:even").css({"color":"red"});
       // $("li:odd").css({"color":"red"});

       //$("li:eq(3)").css({"color":"red"});
       //$("li:lt(1)").css({"color":"red"});

       //---操作属性----------------------------------------------
         //如果是一个参数就是获取属性的值
         //如果是两个参数就是修改属性的值
     /*  let id =  $("#oneDiv").attr("id");
      console.log(id); */

      // $("#oneDiv").attr("id","newDiv");
      // $("#oneDiv").attr("orderid","1111");

      //删除属性
      //$("#oneDiv").removeAttr("class");

      //prop() 该方法主要针对那些返回 true 或者false的属性
      //当你获取的属性或者操作的属性返回值是boolean值的就是prop()方法
         $("button").click(()=>{
          //let v= $("input").attr("checked");
            //let v= $("input").prop("checked");
          //   console.log(v);
   
          //console.log($("#oneDiv").attr("class"));
         // $("#oneDiv").attr("class","oneclass")
              //添加一个类名
          //$("#oneDiv").addClass("threeClass");
           //删除一个类名
          //$("#oneDiv").removeClass("oneclass");
          //切换类名
         // $("#oneDiv").toggleClass("threeClass")

      //innerHTML  
            // console.log($("#oneDiv").html())
            //$("#oneDiv").html("<h1>我是被修改的</h1>");
            //console.log($("#oneDiv").text())
            //$("#oneDiv").text("<h1>我是被修改的</h1>");

            //val() 主要是操作元素中表单的value属性
           //let va= $("input[type='text']").val();
           //console.log(va);
           //$("input[type='text']").val("法外狂徒张三");
         //----操作css-----------------------------------
         // let h = $(".cssDiv").css("width");
         // console.log(h);
         //$(".cssDiv").css({"width": parseInt($(".cssDiv").css("width"))+100+"px"})
          //console.log($(".cssDiv").height());

          //console.log($(".cssDiv").css("left"))
          console.log($(".cssDiv").position());
        });
        
      
      }); 
</script>